<!--
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<div *ngIf="connectionProfileData">
    <form (ngSubmit)="onSubmit()" #connectionProfileForm="ngForm" (keydown)="handleKeyPress($event)">
        <section class="profile-section delimited">
            <div class="description upper">Basic Configuration</div>
            <div class="data">
                <table class="profile-info extra-space-right extra-space-left">
                    <colgroup>
                        <col span="1" style="width: 11%;">
                        <col span="1" style="width: 89%;">
                    </colgroup>
                    <tr>
                        <th>
                            Connection Profile Name*
                        </th>
                        <td>
                            <input [ngClass]="{'error-underline': name.invalid && (name.dirty || name.touched)}"
                                   type="text"
                                   [(ngModel)]="basic.name" #name="ngModel" name="name" required>
                            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="error-message">
                                Name is required
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Profile Description
                        </th>
                        <td>
                            <input type="text" [(ngModel)]="basic.description" #description="ngModel" name="description">
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Organization*
                        </th>
                        <td>
                            <input
                                [ngClass]="{'error-underline': organization.invalid && (organization.dirty || organization.touched)}"
                                type="text"
                                [(ngModel)]="basic.organization" #organization="ngModel" name="organization" required>
                            <div *ngIf="organization.invalid && (organization.dirty || organization.touched)"
                                 class="error-message">
                                organization is required
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            MSPID*
                        </th>
                        <td>
                            <input
                                [ngClass]="{'error-underline': mspid.invalid && (mspid.dirty || mspid.touched)}"
                                type="text"
                                [(ngModel)]="basic.mspid" #mspid="ngModel" name="mspid" required>
                            <div *ngIf="mspid.invalid && (mspid.dirty || mspid.touched)" class="error-message">
                                MSPID is required
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Channel*
                        </th>
                        <td>
                            <input
                                [ngClass]="{'error-underline': channel.invalid && (channel.dirty || channel.touched)}"
                                type="text"
                                [(ngModel)]="basic.channel" #channel="ngModel" name="channel" required>
                            <div *ngIf="channel.invalid && (channel.dirty || channel.touched)" class="error-message">
                                Channel is required
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Commit Timeout
                        </th>
                        <td>
                            <input
                                type="text"
                                [(ngModel)]="basic.commitTimeout" #commitTimeout="ngModel" name="commitTimeout"
                                [ngClass]="{'error-underline': (commitTimeout.invalid || !isNumber(basic.commitTimeout))&& (commitTimeout.dirty || commitTimeout.touched)}" >
                            <div *ngIf="commitTimeout.invalid && (commitTimeout.dirty || commitTimeout.touched)" class="error-message">
                                Commit timeout is required
                            </div>
                            <div *ngIf="!isNumber(basic.commitTimeout) && (commitTimeout.dirty || commitTimeout.touched)" class="error-message">
                                Commit timeout must be a number
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </section>
        <section class="profile-section delimited">
            <div class="description upper">Orderer(s)</div>
            <div class="data">
                <div *ngFor="let orderer of orderers; let ordererIndex = index" class="property-set">
                    <table class="profile-info">
                        <colgroup>
                            <col span="1" style="width: 10%;">
                            <col span="1" style="width: 55%;">
                            <col span="1" style="width: 34%;">
                        </colgroup>
                        <tr>
                            <th>
                                Name*
                            </th>
                            <td>
                                <input
                                    [ngClass]="{'error-underline': ordererName.invalid && (ordererName.dirty || ordererName.touched)}"
                                    type="text"
                                    [(ngModel)]="orderer.name" #ordererName="ngModel" name="ordererName{{ordererIndex}}" required>
                                <div *ngIf="ordererName.invalid && (ordererName.dirty || ordererName.touched)"
                                     class="error-message">
                                    Orderer name is required
                                </div>
                            </td>
                            <td>
                                <button type="button"
                                        class="certificate-button"
                                        [ngClass]="{'no-cert': !orderer.tlsCACerts}"
                                        (click)="openAddCertificateModal(ordererIndex,'orderers');">
                                    <svg class="standard-icon" aria-hidden="true">
                                        <use xlink:href="#icon-data-quality_16"></use>
                                    </svg>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Url*
                            </th>
                            <td>
                                <input
                                    [ngClass]="{'error-underline': ordererUrl.invalid && (ordererUrl.dirty || ordererUrl.touched)}"
                                    type="text"
                                    [(ngModel)]="orderer.url" #ordererUrl="ngModel" name="ordererUrl{{ordererIndex}}" required>
                                <div *ngIf="ordererUrl.invalid && (ordererUrl.dirty || ordererUrl.touched)"
                                     class="error-message">
                                    Orderer url is required
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table class="profile-info">
                        <colgroup>
                            <col span="1" style="width: 10%;">
                            <col span="1" style="width: 55%;">
                            <col span="1" style="width: 35%;">
                        </colgroup>
                        <tr>
                            <th rowspan="4">GRPC Options</th>
                            <th>
                                GRPC max message length
                            </th>
                        </tr>
                        <tr>
                          <td>
                              <input type="text" [(ngModel)]="orderer.grpcOptions.grpcMaxSendMessageLength" #ordererGrpcMaxSendMessageLength='ngModel'
                                     name="ordererGrpcMaxSendMessageLength{{ordererIndex}}"
                                     [ngClass]="{'error-underline': !isNumber(orderer.grpcOptions.grpcMaxSendMessageLength) && (ordererGrpcMaxSendMessageLength.dirty || ordererGrpcMaxSendMessageLength.touched)}">
                              <div *ngIf="!isNumber(orderer.grpcOptions.grpcMaxSendMessageLength) && (ordererGrpcMaxSendMessageLength.dirty || ordererGrpcMaxSendMessageLength.touched)"
                                     class="error-message">
                                     Value must be a number
                              </div>
                          </td>
                          <td>
                              <div class="profile-buttons">
                                  <button type="button" class="secondary" *ngIf="ordererIndex === orderers.length -1"
                                          (click)="addOrderer()">+ Add another
                                  </button>
                                  <button type="button" class="secondary" *ngIf="orderers.length > 1"
                                          (click)="removeOrderer(ordererIndex)">
                                      Remove orderer
                                  </button>
                              </div>
                          </td>
                        </tr>
                        <tr>
                          <th>
                              GRPC http2 keep alive time
                          </th>
                        </tr>
                        <tr>
                          <td>
                              <input type="text" [(ngModel)]="orderer.grpcOptions.grpcHttp2KeepAliveTime" #ordererGrpcHttp2KeepAliveTime='ngModel'
                                     name="ordererGrpcHttp2KeepAliveTime{{ordererIndex}}"
                                     [ngClass]="{'error-underline': !isNumber(orderer.grpcOptions.grpcHttp2KeepAliveTime) && (ordererGrpcHttp2KeepAliveTime.dirty || ordererGrpcHttp2KeepAliveTime.touched)}" >
                              <div *ngIf="!isNumber(orderer.grpcOptions.grpcHttp2KeepAliveTime) && (ordererGrpcHttp2KeepAliveTime.dirty || ordererGrpcHttp2KeepAliveTime.touched)"
                                    class="error-message">
                                    Value must be a number
                              </div>
                          </td>
                        </tr>
                    </table>
                </div>

                <table class="profile-info extra-space-right extra-space-left">
                    <colgroup>
                        <col span="1" style="width: 11%;">
                        <col span="1" style="width: 89%;">
                    </colgroup>
                    <tr>
                        <th>Timeout</th>
                        <td>
                            <input type="text" [(ngModel)]="ordererTimeout" #ordererTimeoutField='ngModel'
                                   name="ordererTimeoutField"
                                   [ngClass]="{'error-underline': !isNumber(ordererTimeout) && (ordererTimeoutField.dirty || ordererTimeoutField.touched)}" >
                            <div *ngIf="!isNumber(ordererTimeout) && (ordererTimeoutField.dirty || ordererTimeoutField.touched)"
                                   class="error-message">
                                   Value must be a number
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </section>
        <section class="profile-section delimited">
            <div class="description upper">Peer(s)</div>
            <div class="data">
                <div *ngFor="let peer of peers; let peerIndex = index" class="property-set">
                    <table class="profile-info">
                        <colgroup>
                            <col span="1" style="width: 10%;">
                            <col span="1" style="width: 55%;">
                            <col span="1" style="width: 34%;">
                        </colgroup>
                        <tr>
                            <th>
                                Name*
                            </th>
                            <td>
                                <input
                                    [ngClass]="{'error-underline': peerName.invalid && (peerName.dirty || peerName.touched)}"
                                    type="text"
                                    [(ngModel)]="peer.name" #peerName="ngModel" name="peerName{{peerIndex}}" required>
                                <div *ngIf="peerName.invalid && (peerName.dirty || peerName.touched)"
                                     class="error-message">
                                    Peer name is required
                                </div>
                            </td>
                            <td>
                                <button type="button"
                                        class="certificate-button"
                                        [ngClass]="{'no-cert': !peer.tlsCACerts}"
                                        (click)="openAddCertificateModal(peerIndex,'peers');">
                                    <svg class="standard-icon" aria-hidden="true">
                                        <use xlink:href="#icon-data-quality_16"></use>
                                    </svg>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Url*
                            </th>
                            <td>
                                <input
                                    [ngClass]="{'error-underline': peerUrl.invalid && (peerUrl.dirty || peerUrl.touched)}"
                                    type="text"
                                    [(ngModel)]="peer.url" #peerUrl="ngModel" name="peerUrl{{peerIndex}}" required>
                                <div *ngIf="peerUrl.invalid && (peerUrl.dirty || peerUrl.touched)"
                                     class="error-message">
                                    Peer url is required
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table class="profile-info">
                        <colgroup>
                            <col span="1" style="width: 10%;">
                            <col span="1" style="width: 55%;">
                            <col span="1" style="width: 35%;">
                        </colgroup>
                        <tr>
                            <th rowspan="4">GRPC Options</th>
                            <th>GRPC max message length</th>
                        </tr>
                        <tr>
                          <td class="text-below">
                              <input type="text" [(ngModel)]="peer.grpcOptions.grpcMaxSendMessageLength" #peerGrpcMaxSendMessageLength='ngModel'
                                     name="peerGrpcMaxSendMessageLength{{peerIndex}}"
                                     [ngClass]="{'error-underline': !isNumber(peer.grpcOptions.grpcMaxSendMessageLength) && (peerGrpcMaxSendMessageLength.dirty || peerGrpcMaxSendMessageLength.touched)}">
                              <div *ngIf="!isNumber(peer.grpcOptions.grpcMaxSendMessageLength) && (peerGrpcMaxSendMessageLength.dirty || peerGrpcMaxSendMessageLength.touched)"
                                     class="error-message">
                                     Value must be a number
                              </div>
                          </td>
                          <td class="text-below">
                              <div class="profile-buttons">
                                  <button type="button" class="secondary" *ngIf="peerIndex === peers.length -1"
                                          (click)="addPeer()">+ Add another
                                  </button>
                                  <button type="button" class="secondary" *ngIf="peers.length > 1"
                                          (click)="removePeer(peerIndex)">
                                      Remove peer
                                  </button>
                              </div>
                          </td>
                        </tr>
                        <tr>
                          <th>
                              GRPC http2 keep alive time
                          </th>
                        </tr>
                        <tr>
                          <td class="text-below">
                              <input type="text" [(ngModel)]="peer.grpcOptions.grpcHttp2KeepAliveTime" #peerGrpcHttp2KeepAliveTime='ngModel'
                                     name="peerGrpcHttp2KeepAliveTime{{peerIndex}}"
                                     [ngClass]="{'error-underline': !isNumber(peer.grpcOptions.grpcHttp2KeepAliveTime) && (peerGrpcHttp2KeepAliveTime.dirty || peerGrpcHttp2KeepAliveTime.touched)}" >
                              <div *ngIf="!isNumber(peer.grpcOptions.grpcHttp2KeepAliveTime) && (peerGrpcHttp2KeepAliveTime.dirty || peerGrpcHttp2KeepAliveTime.touched)"
                                    class="error-message">
                                    Value must be a number
                              </div>
                          </td>
                        </tr>
                      </table>
                      <table class="profile-info">
                        <colgroup>
                            <col span="1" style="width: 10%;">
                            <col span="1" style="width: 20%;">
                            <col span="1" style="width: 35%;">
                            <col span="1" style="width: 35%;">
                        </colgroup>
                        <tr>
                          <th rowspan="4">Roles</th>
                          <th>
                              Endorsing Peer
                          </th>
                          <td>
                              <input type="checkbox" [(ngModel)]="peer.endorsingPeer" #peerRoleEndorsingPeer='ngModel' name="peerRoleEndorsingPeer{{peerIndex}}" id="peerRoleEndorsingPeer{{peerIndex}}" />
                              <label for="peerRoleEndorsingPeer{{peerIndex}}" class="checkbox-label" ></label>
                          </td>
                        </tr>
                        <tr>
                          <th>
                              Chaincode Query Peer
                          </th>
                          <td>
                              <input type="checkbox" [(ngModel)]="peer.chaincodeQuery" #peerRoleEndorsingPeer='ngModel' name="peerRoleChaincodeQuery{{peerIndex}}" id="peerRoleChaincodeQuery{{peerIndex}}" />
                              <label for="peerRoleChaincodeQuery{{peerIndex}}" class="checkbox-label" ></label>
                          </td>
                        </tr>
                        <tr>
                          <th>
                              Ledger Query Peer
                          </th>
                          <td>
                              <input type="checkbox" [(ngModel)]="peer.ledgerQuery" #peerRoleEndorsingPeer='ngModel' name="peerRoleLedgerQuery{{peerIndex}}" id="peerRoleLedgerQuery{{peerIndex}}" />
                              <label for="peerRoleLedgerQuery{{peerIndex}}" class="checkbox-label" ></label>
                          </td>
                        </tr>
                        <tr>
                          <th>
                              Event Source
                          </th>
                          <td>
                              <input type="checkbox" [(ngModel)]="peer.eventSource" #peerRoleEndorsingPeer='ngModel' name="peerRoleEventSource{{peerIndex}}" id="peerRoleEventSource{{peerIndex}}" />
                              <label for="peerRoleEventSource{{peerIndex}}" class="checkbox-label" ></label>
                          </td>
                        </tr>
                        <tr>
                            <th>
                                Part of organisation
                            </th>
                            <td>
                                <input type="checkbox" [(ngModel)]="peer.organization" #peerOrganization='ngModel' name="peerOrganization{{peerIndex}}" id="peerOrganization{{peerIndex}}"/>
                                <label for="peerOrganization{{peerIndex}}" class="checkbox-label" ></label>
                            </td>
                        </tr>
                    </table>
                </div>

                <div>
                    <table class="profile-info extra-space-left extra-space-right">
                        <colgroup>
                            <col span="1" style="width: 10%;">
                            <col span="1" style="width: 10%;">
                            <col span="1" style="width: 80%;">
                        </colgroup>
                        <tr>
                            <th rowspan="3">Timeout</th>
                            <th>
                                endorser
                            </th>
                            <td>
                                <input type="text" [(ngModel)]="peerTimeOut.endorser" #peerTimeoutEndorser="ngModel"
                                       name="peerTimeoutEndorser"
                                       [ngClass]="{'error-underline': !isNumber(peerTimeOut.endorser) && (peerTimeoutEndorser.dirty || peerTimeoutEndorser.touched)}" >
                                <div *ngIf="!isNumber(peerTimeOut.endorser) && (peerTimeoutEndorser.dirty || peerTimeoutEndorser.touched)"
                                       class="error-message">
                                       Value must be a number
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                eventHub
                            </th>
                            <td>
                                <input type="text" [(ngModel)]="peerTimeOut.eventHub" #peerTimeoutEventHub="ngModel"
                                       name="peerTimeoutEventHub"
                                       [ngClass]="{'error-underline': !isNumber(peerTimeOut.eventHub) && (peerTimeoutEventHub.dirty || peerTimeoutEventHub.touched)}" >
                                <div *ngIf="!isNumber(peerTimeOut.eventHub) && (peerTimeoutEventHub.dirty || peerTimeoutEventHub.touched)"
                                       class="error-message">
                                       Value must be a number
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                eventReg
                            </th>
                            <td>
                                <input type="text" [(ngModel)]="peerTimeOut.eventReg" #peerTimeoutEventReg="ngModel"
                                       name="peerTimeoutEventReg"
                                       [ngClass]="{'error-underline': !isNumber(peerTimeOut.eventReg) && (peerTimeoutEventReg.dirty || peerTimeoutEventReg.touched)}" >
                                <div *ngIf="!isNumber(peerTimeOut.eventReg) && (peerTimeoutEventReg.dirty || peerTimeoutEventReg.touched)"
                                       class="error-message">
                                       Value must be a number
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </section>
        <section class="profile-section delimited">
            <div class="description upper">Certificate Authority</div>
            <div class="data">
                <table class="profile-info extra-space-left">
                    <colgroup>
                        <col span="1" style="width: 11%;">
                        <col span="1" style="width: 55%;">
                        <col span="1" style="width: 34%;">
                    </colgroup>
                    <tr>
                        <th>
                            Name
                        </th>
                        <td>
                            <input type="text" [(ngModel)]="ca.caName" name="caName">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>
                            Url*
                        </th>
                        <td>
                            <input
                                [ngClass]="{'error-underline': caUrl.invalid && (caUrl.dirty || caUrl.touched)}"
                                type="text"
                                [(ngModel)]="ca.url" #caUrl="ngModel" (keyup)="setVerify()"
                                name="caUrl" required>
                            <div *ngIf="caUrl.invalid && (caUrl.dirty || caUrl.touched)" class="error-message">
                                Certificate authority url is required
                            </div>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>
                            Verify
                        </th>
                        <td>
                            <input type="checkbox" (click)="clearCaTls()" [(ngModel)]="ca.httpOptions.verify" #caHttpOptionsVerify="ngModel" name="caHttpOptionsVerify" id="caHttpOptionsVerify" [disabled]="ca.url.substring(ca.url.indexOf('://')-1, ca.url.indexOf('://')) !== 's'" />
                            <label for="caHttpOptionsVerify" class="checkbox-label ca" ></label>
                            <button type="button"
                                    class="certificate-button ca"
                                    [ngClass]="{'no-cert': !ca.tlsCACerts}"
                                    (click)="openAddCertificateModal(0,'ca');"
                                    [disabled]="!ca.httpOptions.verify">
                                <svg class="standard-icon" aria-hidden="true">
                                    <use xlink:href="#icon-data-quality_16"></use>
                                </svg>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </section>
        <footer>
            <div>
                <button class="secondary" (click)="stopEditing()">Cancel</button>
                <button class="primary" type="submit" [disabled]="!formValid(connectionProfileForm.form)" >Next</button>
            </div>
        </footer>
    </form>
</div>
